<template>

    <div  class="videoDetail">
      <!--<el-button @click="show" type="primary">回退</el-button>-->

      <div class="detail-info">
        <div class="detail-container">
          <div class="left">
            <h1 class="title" >{{movieDetail.data.title}}</h1>
            <div class="info">

              <div class="category">
                <span class="type">主页</span>
                <span class="icon el-icon-arrow-right"></span>
                <span class="type">分区</span>
                <span class="icon el-icon-arrow-right"></span>
                <span class="type">类型</span>
              </div>

              <span class="date">日期: {{movieDetail.data.add_time}}</span>
              <span class="_id">id: {{movieDetail.data._id}}</span>
            </div>

            <div class="play-info">
              <div class="play-item">
                <span class="icon ion-social-youtube"></span>
                <span class="num">222</span>
              </div>

              <div class="play-item">
                <span class="icon ion-chatbubbles"></span>
                <span class="num">111</span>
              </div>

              <div class="play-item">
                <span class="icon ion-ios-star"></span>
                <span class="num">22</span>
              </div>
            </div>
          </div>
          <div class="right">
            <img src="../../assets/avatar.png" width="68" height="68">
            <div class="user-info">
              <h1 class="name">xiaohai</h1>
              <p class="desc">zzz</p>
              <div class="welcome">
                <span>投稿: 17</span><span>粉丝: 17</span>
              </div>

              <div class="action">
                <div class="care"><span class="icon ion-ios-plus-empty"></span>关注</div>
                <div class="battery">充电</div>
              </div>
            </div>


          </div>
        </div>
      </div>
      <div class="detail-content">
        <div class="detail-container">
          <div class="video"  >
            <video-player  ref="videoPlayer"
                           :options="playerOptions"
                           @play="onPlayerPlay($event)"
                           @pause="onPlayerPause($event)"
                           @ended="onPlayerEnded($event)"
                           @loadeddata="onPlayerLoadeddata($event)"
                           @waiting="onPlayerWaiting($event)"
                           @playing="onPlayerPlaying($event)"
                           @timeupdate="onPlayerTimeupdate($event)"
                           @canplay="onPlayerCanplay($event)"
                           @canplaythrough="onPlayerCanplaythrough($event)"
                           @ready="playerReadied"
                           @statechanged="playerStateChanged($event)">
            </video-player>
          </div>

          <div class="arc-toobar">
            <div class="item">
              <span class="icon ion-social-angular"></span>
              <div class="content">
                <h2 class="title">分享</h2>
                <p class="num">192</p>
              </div>
            </div>
            <div class="item">
              <span class="icon ion-social-chrome"></span>
              <div class="content">
                <h2 class="title">分享</h2>
                <p class="num">192</p>
              </div>
            </div>
            <div class="item">
              <span class="icon ion-social-python"></span>
              <div class="content">
                <h2 class="title">分享</h2>
                <p class="num">192</p>
              </div>
            </div>
            <div class="item">
              <span class="icon ion-social-freebsd-devil"></span>
              <div class="content">
                <h2 class="title">分享</h2>
                <p class="num">192</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-bottom">
        <div class="left">
          <div class="desc">描述</div>
          <div class="love other">

          </div>

          <div class="commit">
            <div class="commit-header">
              <div class="commit-desc">
                <span class="active">最新评论</span>
                <span>热门评论</span>
              </div>
              <div class="commit-fengye">
                <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li>4</li>
                </ul>
              </div>
            </div>
            <div class="commit-left">
              <div class="thumb">
                <img src="../../assets/avatar.png" width="48" height="48">
              </div>
              <div class="commit-text">
                <textarea>请在这里添加上你的评论吧!</textarea>
              </div>
              <div class="put-text"></div>
            </div>
            <div class="commit-right">

            </div>
          </div>
        </div>

        <div class="right"></div>
      </div>
    </div>

</template>

<script>
  import { videoPlayer } from 'vue-video-player';
  import Mock from 'mockjs';
  const ERROR = 0;
  export default {
    data() {
      return {
        movieDetail: {},
        playerOptions: {
          // component options
          start: 0,
          playsinline: false,
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "http://oejvtim90.bkt.clouddn.com/xiaohai-video5740.657272114946"
          }],
          poster: "http://oiq23viaf.bkt.clouddn.com/upload_icon2.png",
        }
      }
    },
    created() {
      this.$http.get('http://rapapi.org/mockjs/17725/api/movie/detail/?accessToken=sss').then((response) => {
        response = response.body;
        if (Mock.mock(response).errno === ERROR) {
          this.movieDetail = Mock.mock(response);
          this.playerOptions.sources.src = Mock.mock(response).data.movie_url;
        }
      });
    },
    mounted() {
      // console.log('this is current player instance object', this.player)
      setTimeout(() => {
        // console.log('dynamic change options', this)
        this.playerOptions.muted = false
      }, 2000)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        console.log('example 01: the player is readied', player)
      }
    },
    components: {
      videoPlayer
    }

  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../common/scss/mixin.Scss";

  .videoDetail{
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.5s;

    .detail-info{
      @include border-bottom-1px(rgba(7,17,27,0.3));
      .detail-container{
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 1160px;
        height: 120px;
        .left{
          width: 640px;
          .title{
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-right: 80px;
            color: #525659;
            font-weight: 700;
            height: 24px;
            line-height: 24px;
            font-size: 18px;
          }
          .info{
            margin-top: 10px;
            font-size: 0;
            .category{
              display: inline-block;
              font-size: 12px;
              .type{
                color: #99a2aa;
                &:hover{
                  color: #00a1d6
                }
              }

            }
            .date,._id{
              margin-left: 20px;
              font-size: 12px;
              color: #99a2aa;
            }
          }
          .play-info{
            .play-item{
              display: inline-block;
              border-right: 1px solid rgba(7,17,27,0.1);
              padding: 0 40px;
              margin-top: 20px;
              font-size: 0;
              &:last-child{
                border-right: 0;
              }
              .icon{
                margin-right: 10px;
                line-height: 20px;
                font-size: 20px;
                color: #99a2aa;
              }
              .num{
                vertical-align: bottom;
                line-height: 20px;
                font-size: 12px;
                color: #222;
              }
            }
          }
        }
        .right{
          position: relative;
          img{
            border-radius: 50%;
            margin-right: 10px;
          }
          .user-info{
            display: inline-block;
            vertical-align: top;
            width: 225px;
            .name{
              margin-bottom: 5px;
              font-size: 14px;
              color: rgb(0, 161, 214);
            }
            .desc{
              display: block;
              word-break: normal;
              white-space: pre-wrap;
              word-wrap: break-word;
              margin-bottom: 5px;
              width: 225px;
              overflow: hidden;
              max-height: 40px;
              line-height: 18px;
              font-size: 12px;
              color: #333;
            }
            .welcome{
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: #99a2aa;
            }
            .action{
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
              .care{
                cursor: pointer;
                padding: 6px 45px;
                border: 1px solid #00a1d6;
                border-radius: 4px;
                font-size: 12px;
                color: #fff;
                background: #00a1d6;
                transition: all 0.2s;
                &:hover{
                  opacity: 0.8;
                }
                .icon{
                  margin-right: 10px;
                }
              }
              .battery{
                cursor: pointer;
                padding: 6px 20px;
                border: 1px solid #f25d8e;
                border-radius: 4px;
                font-size: 12px;
                color: #f25d8e;
                transition: all 0.2s;
                &:hover{
                  color: #fff;
                  background: #f25d8e;
                }
              }
            }
          }

        }
      }
    }
    .detail-content{
      width: 100%;
      min-height: 300px;
      background: #e5e9ef;
      .detail-container{
        padding: 20px 0;
        margin:0 auto;
        width: 1160px;
        .video{
          width: 100%;
          .video-js{
            height: 652px;
          }
        }
        .arc-toobar{
          box-sizing: border-box;
          padding: 0 4px;
          margin-top: 20px;
          width: 100%;
          height: 80px;
          background: #fff;
          .item{
            display: flex;
            justify-content: center;
            float: left;
            box-sizing: border-box;
            cursor: pointer;
            padding-top: 10px;
            margin-left: 20px;
            width: 150px;
            height: 100%;
            font-size: 0;
            .icon{
              line-height: 55px;
              font-size: 50px;
            }
            .content{
              display: inline-block;
              font-size: 12px;
              margin-left: 30px;
              h2{
                margin-top: 10px;
                margin-bottom: 8px;
                font-weight: 700;
                font-size: 18px;
              }
            }
            &:hover{
              border-right: 1px solid rgba(7,17,27,0.2);
              border-left: 1px solid rgba(7,17,27,0.2);
            }
            &:first-of-type{
              border-left: 0;
            }
          }
        }
      }
    }
    .detail-bottom{
      margin: 0 auto;
      padding-top: 20px;
      width: 1160px;
      min-height: 300px;
      @include border-top-1px(rgba(7,17,27,0.3));
      .left{
        float: left;
        width: 890px;
        .desc{
          box-sizing: border-box;
          padding-top: 10px;
          padding-bottom: 20px;
          line-height: 20px;
          font-size: 14px;
          color: rgb(7,17,27);
          width: 100%;
          @include border-bottom-1px(rgba(7,17,27,0.3));
        }
        .commit-header{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 0 0 0 0;
          @include border-bottom-1px(rgba(7,17,27,0.3));
          .commit-desc{
            font-size: 0;
            span{
              display: inline-block;
              line-height: 55px;
              height: 55px;
              margin-right: 20px;
              font-size: 14px;
            }
            .active{
              border-bottom: 1px solid red;
            }
          }
          .commit-fengye{
            ul{
              li{
                float: left;
                margin-right: 5px;
                line-height: 55px;
              }
            }
          }
        }
        .commit-left{
          padding-top: 20px;
          display: flex;
          justify-content: space-between;
          .thumb{
            padding: 10px;
            img{
              border-radius: 50%;
            }
          }
          .commit-text{
            width: 90%;
            height: 70px;
            textarea{
              resize: none;
              padding: 5px 10px;
              line-height: normal;
              font-size: 12px;
              display: inline-block;
              box-sizing: border-box;
              background-color: #f4f5f7;
              border: 1px solid #e5e9ef;
              overflow: auto;
              border-radius: 4px;
              color: #555;
              width: 100%;
              height: 100%;
              &:focus{
                outline:#00b2ff solid thin;
              }
              &.outline{
                outline:#00b2ff solid thin;
              }
            }
          }

          .put-text{
            width: 100px;
            height: 70px;
            margin-left: 25px;
            background-color: #00b2ff;
          }
        }

      }

      .right{
        float: right;
        width: 250px;
        min-height: 300px;
        background-color: red;
      }
    }
  }
</style>
